<template>
  <div class="kpi" :style="siteContentViewHeight">
    <div class="navbar-wrap">
      <div class="nav-btn nav-btn__1" :class="{ 'is-active': groupName === 'mine' }" @click="groupName = 'mine'">
        <span>我的指标</span>
      </div>
      <div class="nav-btn nav-btn__2" @click="$router.push({ name: 'kpi-params' })">
        <span>指标配置</span>
      </div>
      <div class="nav-btn nav-btn__3" :class="{ 'is-active': groupName === 'all' }" @click="groupName = 'all'">
        <span>共享指标</span>
      </div>
    </div>
    <kpi-group v-if="groupName == 'mine'"></kpi-group>
    <kpi-all v-if="groupName == 'all'"></kpi-all>
  </div>
</template>

<script>
import kpiGroup from './kpi-group'
import kpiAll from './kpi-all'
export default {
  components: {
    kpiGroup,
    kpiAll
  },
  data() {
    return {
      groupName: 'mine',
      loading: false
    }
  },
  computed: {
    siteContentViewHeight() {
      return { height: this.$store.getters['common/siteContentViewHeight'] + 'px' }
    }
  },
  methods: {}
}
</script>

<style lang="scss">
.kpi {
  padding: 0 10px;
  position: relative;
  .navbar-wrap {
    position: absolute;
    left: 10px;
    top: 0;
    bottom: 0;
    width: 36px;
    border-right: 1px solid #dedede;
    z-index: 100;
    .nav-btn {
      font-size: 16px;
      position: absolute;
      padding: 18px 8px;
      background-color: #e8f0ff;
      text-align: center;
      border-right: 1px solid #dedede;
      border-bottom: 1px solid #dedede;
      line-height: 28px;
      margin-top: -2px;
      border-radius: 8px;
      box-shadow: #d0cccc 0 2px 2px;
      cursor: pointer;
      &.nav-btn__1 {
        border-top-left-radius: unset;
        z-index: 4;
      }
      &.nav-btn__2 {
        top: 140px;
        z-index: 3;
      }
      &.nav-btn__3 {
        top: 275px;
        z-index: 2;
        border-bottom-left-radius: unset;
      }
      &.is-active {
        background-color: #4d82e9;
        color: #fff;
        font-weight: bold;
        z-index: 100;
      }
    }
  }
}
</style>
